Flex 布局

1. 什么是 flex 布局
2. 基本概念
3. 容器的属性
4. 项目的属性
5. 实例

一、什么是 flex 布局

Flex 是 Flexible Box 的缩写,意为"灵活的盒子"或"弹性的盒子",所以 flex 布局一般也叫作"弹性布局"

二、基本概念

1. 什么是 flex 容器(flex container)?
采用 flex 布局的元素,称为 flex 容器
.box { display: flex | inline-flex; }

2. 什么是 flex 项目(flex item)?
flex 容器的所有子元素自动成为容器成员,称为 flex 项目

flex

项目默认沿主轴排列